import React from "./react";
// 通过babel把jsx对象编译
let style = { border: "2px solid red", margin: "5px", padding: "0 5px"};
let element = (
  <div id="A1" style={style}>A1
    <div id="B1" style={style}>B1
        <div id="C1" style={style}>C1</div>
        <div id="C2" style={style}>C2</div>
    </div>
    <div id="B2" style={style}>B2</div>
  </div>
);
/* let element = (
  <div id="A1" style={{ border: "2px solid red" }}>
    A1
    <div id="B1" style={{ border: "2px solid red" }}>
      B1
      <div id="C1" style={{ border: "2px solid red" }}>
        C1
      </div>
      <div id="C2" style={{ border: "2px solid red" }}>
        C2
      </div>
    </div>
    <div id="B2" style={{ border: "2px solid red" }}>
      B2
    </div>
  </div>
); */
// 虚拟dom

/* const element=  {
  type: "div",
  props: {
    id: "A1",
    children: [
      {
        type: "div",
        props: {
          id: "B1",
          children: [
            {
              type: "div",
              props: {
                id: "C1",
                children: "C1",
              },
            },
            {
              type: "div",
              props: {
                id: "C2",
                children: "C2",
              },
            },
          ],
        },
      },
      {
        type: "div",
        props: {
          id: "B2",
          children: "B2",
        },
      },
    ],
  },
}; */

export default element
